//配置路由表

import { lazy, Suspense } from "react";

import { Navigate } from "react-router-dom";

let Layout = lazy(() => import('../pages/layout'))
let Login = lazy(() => import('../pages/login'))
let Register = lazy(() => import('../pages/register'))
let Verify = lazy(() => import('../pages/verify'))
let Home = lazy(() => import('../pages/home'))
let TimeLine = lazy(() => import('../pages/timeline'))
let Tag = lazy(() => import('../pages/tag'))
let NotFound = lazy(() => import('../pages/404'))
let About = lazy(() => import('../pages/about'))

let Layout2 = lazy(() => import('../pages/layout2'))
let List = lazy(() => import('../pages/list'))
let Shop = lazy(() => import('../pages/shop'))
let Order = lazy(() => import('../pages/shop/order'))

//路由守卫
const RouteGard = ({ children }) => {
    const token = localStorage.getItem('token')
    if (!token) {
        return <Navigate to='/login'></Navigate>
    }
    return children
}






//二级路由
export const secondRoutes = [
    {
        path: 'home',
        element: <RouteGard> <Suspense fallback='加载中。。。'>
            <Home />
        </Suspense> </RouteGard>,
        title: '主页'
    },
    {
        path: 'timeline',
        element: <RouteGard><Suspense fallback='加载中。。。'>
            <TimeLine />
        </Suspense></RouteGard>,
        title: '时间线'
    },
    {
        path: 'tag',
        element: <Suspense fallback='加载中。。。'>
            <Tag />
        </Suspense>,
        title: '标签'
    },
    {
        path: 'about/:blogId',
        element: <Suspense fallback='加载中。。。'>
            <About />
        </Suspense>,
        title: '关于'
    },
]

export const secondRoutes2 = [
    {
        path: '/layout2/list',
        element: <RouteGard> <Suspense fallback='加载中。。。'>
            <List />
        </Suspense> </RouteGard>,
        title: '列表'
    },
    {
        path: '/layout2/shop',
        element: <RouteGard><Suspense fallback='加载中。。。'>
            <Shop />
        </Suspense></RouteGard>,
        children: [
            {
                path: '/layout2/shop/order',
                element: <RouteGard><Suspense fallback='加载中。。。'>
                    <Order />
                </Suspense></RouteGard>,
                title:'订单'

            }
        ],
        title: '商店'
    },

]

//一级路由
export const routes = [
    {
        path: '/',
        element: <Suspense fallback='加载中。。。'>
            <Layout />
        </Suspense>,
        children: secondRoutes
    },
    {
        path: '/layout2',
        element: <Suspense fallback='加载中。。。'>
            <Layout2 />
        </Suspense>,
        children: secondRoutes2
    },




    {
        path: '/login',
        element: <Suspense fallback='加载中。。。'>
            <Login />
        </Suspense>
    },
    {
        path: '/verify',
        element: <Suspense fallback='加载中。。。'>
            <Verify />
        </Suspense>
    },
    {
        path: '/register',
        element: <Suspense fallback='加载中。。。'>
            <Register />
        </Suspense>
    },
    //404配置
    {
        path: '*',
        element: <Suspense fallback='加载中。。。'>
            <NotFound />
        </Suspense>
    }
]